<template>
    <div class="blank-box">
        <Hover v-if="hover.showHover" :brickInfo="brickInfo" :hover="hover"/>
        <div class="blank" :style="height + bgColor"/>
    </div>
</template>

<script>
    import Hover from '../common/mainpage/Hover.vue';

    export default {
        name: 'YXBlank',
        props: {
            hover: {
                type: Object,
                default: _ => {
                    return {
                        showHover: false,
                        brickHover: true,
                        isSaved: true,
                        roundTabBtn: {
                            current: 'left',
                            // 判断当前组件是否需要设置样式
                            currentType: ''
                        }
                    };
                }
            },
            isEdit: {
                type: Boolean,
                default: false
            },
            brickInfo: {
                type: Object,
                default: _ => {
                    return {
                        active: false
                    };
                }
            },
            content: {
                type: Object,
                default: _ => {
                    return {
                        height: 10,
                        color: 'rgba(255,255,255,1)'
                    };
                }
            }
        },
        components: {
            Hover
        },
        computed: {
            height() {
                return `height: ${this.content.height}px;`;
            },
            bgColor() {
                return `background-color: ${this.content.color};`;
            }
        }
    }
</script>

<style scoped lang="scss">
    .blank-box {
        position: relative;
    }
</style>
